<template>
  <div
    class="save-box save-2-box w-full h-full overflow-hidden flex justify-start items-center flex-col"
  >
    <div
      class="title-box w-full h-[52px] pt-[16px] pb-[16px] pl-[24px] pr-[24px] flex justify-between items-center box-border"
    >
      人员信息
    </div>
    <div
      class="content-box w-full h-[calc(100%_-_116px)] pl-[24px] pr-[24px] box-border overflow-hidden overflow-y-auto m-height-0"
      ref="RefOutBox"
    >
      <div
        class="table-box w-full overflow-y-auto overflow-hidden box-border flex flex-col"
        ref="RefTableBox"
      >
        <a-form
          :model="handlerData"
          :label-col-props="{ span: 0 }"
          :wrapper-col-props="{ span: 24 }"
          ref="RefFormBox"
        >
          <CommonTable
            :columnsData="Columns"
            :tableData="handlerData"
            :showPagination="false"
            @row-click="tableRowClick"
          >
            <template #index="{ rowIndex }">{{ rowIndex + 1 }}</template>

            <template #name="{ rowIndex }">
              <a-form-item class="TableItem" feedback>
                <TextInput
                  v-if="!handlerData[rowIndex].isSave"
                  v-model="handlerData[rowIndex].name"
                ></TextInput>
                <span v-else>{{ handlerData[rowIndex].name }}</span>
              </a-form-item>
            </template>
            <template #job_number="{ rowIndex }">
              <a-form-item class="TableItem" feedback>
                <TextInput
                  v-if="!handlerData[rowIndex].isSave"
                  v-model="handlerData[rowIndex].job_number"
                ></TextInput>
                <span v-else>{{ handlerData[rowIndex].job_number }}</span>
              </a-form-item>
            </template>
            <template #affiliation="{ rowIndex }">
              <a-form-item class="TableItem" feedback>
                <TextInput
                  v-if="!handlerData[rowIndex].isSave"
                  v-model="handlerData[rowIndex].affiliation"
                ></TextInput>
                <span v-else>{{ handlerData[rowIndex].affiliation }}</span>
              </a-form-item>
            </template>
            <template #office="{ rowIndex }">
              <a-form-item class="TableItem" feedback>
                <SelectInput
                  placeholder="请选择职业"
                  v-model="handlerData[rowIndex].office"
                  style="width: 100%"
                  v-if="!handlerData[rowIndex].isSave"
                >
                  <a-option value="教师">教师</a-option>
                  <a-option value="医生">医生</a-option>
                  <a-option value="工程师">工程师</a-option>
                  <a-option value="商人">商人</a-option>
                  <a-option value="程序员">程序员</a-option>
                  <a-option value="设计师">设计师</a-option>
                </SelectInput>
                <span v-else>{{ handlerData[rowIndex].office }}</span>
              </a-form-item>
            </template>
            <template #qualifications="{ rowIndex }">
              <a-form-item class="TableItem" feedback>
                <SelectInput
                  placeholder="请选择学历"
                  v-model="handlerData[rowIndex].qualifications"
                  style="width: 100%"
                  v-if="!handlerData[rowIndex].isSave"
                >
                  <a-option value="大专">大专</a-option>
                  <a-option value="本科">本科</a-option>
                  <a-option value="研究生">研究生</a-option>
                  <a-option value="硕士">硕士</a-option>
                  <a-option value="博士">博士</a-option>
                </SelectInput>
                <span v-else>{{ handlerData[rowIndex].qualifications }}</span>
              </a-form-item>
            </template>
            <template #operator="{ record, rowIndex }">
              <a-link
                type="primary"
                v-if="!handlerData[rowIndex].isSave"
                @click="saveRow(record, rowIndex)"
                >保存</a-link
              >
              <a-link
                type="primary"
                v-if="handlerData[rowIndex].isSave"
                @click="editRow(record, rowIndex)"
                >编辑</a-link
              >
              <a-link
                type="primary"
                v-if="handlerData[rowIndex].isSave"
                @click="removeRow(record, rowIndex)"
                >删除</a-link
              >
            </template>
          </CommonTable>
        </a-form>
      </div>
      <a-button class="w-full mt-[20px] add-button-box" @click="addRow">
        <icon-plus />新增成员
      </a-button>
    </div>
    <div class="footer-box w-full h-[64px] flex justify-between items-center pl-[24px] pr-[24px]">
      <span></span>
      <span>
        <a-button class="mr-2" @click="$router.push({ name: 'projectIndex' })">取消</a-button>
        <a-button class="mr-2" @click="emits('toPrev')">上一步</a-button>
        <a-button :disabled="handlerData.length <= 0" type="primary" class="ml-2" @click="toSubmit"
          >完成</a-button
        >
      </span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { Columns, CreateColumnData } from '../values';
import { Message } from '@arco-design/web-vue';
import { deepClone } from '@/util/clonedeep';

const props = defineProps({
  formData: {
    type: Object,
    required: true
  }
});
const emits = defineEmits(['submit', 'toPrev']);
const handlerData = ref<any[]>([]);
const RefOutBox = ref<HTMLDivElement>();
const RefTableBox = ref<HTMLDivElement>();
const activeRow = ref(0);
const RefFormBox = ref<any>();

function tableRowClick(row: any) {
  activeRow.value = row.index;
}

function addRow() {
  const index = handlerData.value.length + 1;
  handlerData.value.push({
    index,
    ...CreateColumnData(),
    isSave: false //保存
  });
  activeRow.value = index;
}

//删除
function removeRow(d: any, index: number) {
  // const { index } = d
  handlerData.value.splice(index, 1);
}
//保存
function saveRow(d: any, index: number) {
  const { name, job_number, affiliation, office, qualifications } = d;
  if (!name || !job_number || !affiliation || !office || !qualifications) {
    Message.error('请填写完整信息');
    return;
  }
  handlerData.value[index].isSave = true;
}
//编辑
function editRow(d: any, index: number) {
  handlerData.value[index].isSave = false;
}

function toSubmit() {
  if (!RefFormBox.value) {
    return;
  }
  const data = deepClone(handlerData.value);
  data.forEach((item) => {
    delete item.isSave;
    delete item.index;
  });
  const params = {
    ...props.formData,
    project_persons: [...data]
  };
  emits('submit', { ...params });
}

//判断是不是编辑
function getRelations() {
  handlerData.value =
    props.formData.project_persons.map((item) => {
      item.isSave = true;
      return item;
    }) || [];
}

onMounted(() => {
  if (!props.formData.id) return; // 传入的不是编辑数据
  getRelations();
});
</script>

<style lang="less" scoped>
.save-2-box {
  .title-box {
    font-family: Microsoft YaHei;
    font-size: 14px;
    font-weight: bold;
    color: #394d73;
  }
  .content-box {
    .table-box {
      max-height: calc(100% - 62px) !important;
    }
  }
  .footer-box {
    box-shadow: 0px 0px 6px 0px rgba(57, 77, 115, 0.1);
  }
}
.add-button-box {
  background-color: #f0f4fa;
  font-size: 14px;
  font-weight: normal;
  color: #465a80;
  border: 1px dashed #d3dbeb;
  border-radius: 4px;
}
.TableItem {
  margin: 0;
}
.AddButton {
  background-color: #fff;
}
.arco-form-item-status-error {
  :deep(.arco-select) {
    border-color: #f5222d !important;
  }
}
</style>
